<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="./js/js.cookie.js"></script>
    <style>
        html {
            font-size: 13.333333vw
        }

        #bcd{
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            margin-bottom: 1rem;
        }
        img {
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            margin-bottom: 1rem;
        }

        body {
            background: rgba(197, 195, 195, 0.4);
        }

        #name {
            border: 0;
            background: rgba(255, 255, 255, 0.4);

        }
    </style>
</head>

<body>
    <div id="bcd">
    </div>
    <input type="text" id="un" placeholder="请输入用户名">
    <input type="file" id="abc"><br>
    <input type="button" value="确定" id="btn">
    <script>
        


        // $(function () {
        //     $(document).on('change', '#un', function () {


        //         $("#abc").change(function (e) {
        //             var imgBox = e.target;
        //             uploadImg($('#bcd'), imgBox)
        //         });

        //         function uploadImg(element, tag) {
        //             var file = tag.files[0];
        //             var imgSrc;
        //             if (!/image\/\w+/.test(file.type)) {
        //                 alert("看清楚，这个需要图片！");
        //                 return false;
        //             }
        //             var reader = new FileReader();
        //             reader.readAsDataURL(file);
        //             reader.onload = function () {
        //                 // console.log(this.result);
        //                 imgSrc = this.result;
        //                 var imgs = document.createElement("img");
        //                 $(imgs).attr("src", imgSrc);
        //                 console.log(imgSrc)
        //                 element.append(imgs);
        //                 $("#btn").click(function () {
        //                     var username = $("#un").val()
        //                     console.log(111)
        //                     console.log(username)
        //                     console.log(imgSrc)
        //                     Cookies.set('name', username, { expires: 30 })
        //                     Cookies.set('src', imgSrc, { expires: 30 })
        //                     Cookies.set('shu', 1, { expires: 30 })
        //                 })
        //             };
        //         }

        //     })

        // })


    </script>
</body>

</html>